<template>
	<g-page :is-tabbar="true">

		<view class="sear" style="position: fixed; z-index: 2;">
			<u-search placeholder="校友会名称查询" @input="goToSearch" v-model="name"></u-search>
		</view>
		<view class="sear"></view>

		<view class="content">
			<image class="img" :src="srcHeadImg()" mode="aspectFill"></image>
		</view>
		<u-tabs bar-width="100" active-color="#ff0000" :list="list" :is-scroll="false" :current="type" @change="change">
		</u-tabs>

		<view style="padding:10rpx;">
			<scroll-view scroll-y="true" @scrolltolower="scrolltolower">
				<view class="br"></view>
				<view v-if="association.length >0">
					<view v-for="(item,index) in association" :key="index" @click="toxyh(item.id)">
						<view class="list_box" style="position: relative; display: flex;">
							<image class="club_img" :src="srcImage(item.avatarUrl)"></image>
							<view style="display: flex; flex-direction: column; margin-left: 20rpx;">
								<view class="club_text">{{item.associationName.length>10 ? item.associationName.substring(0,10)+'...' : item.associationName}}</view>
								<view class="club_member">成员 {{item.userSum}} 人</view>
							</view>
							<u-icon class="icon" size="20" name="arrow-right"></u-icon>
						</view>
						<view class="br"></view>
					</view>
				</view>
				<view v-else-if="association.length ==0 && ty ==0">暂无校友会！</view>
				<view v-else-if="association.length ==0 && ty ==2">没有查询到此校友会！</view>
			</scroll-view>
		</view>

	</g-page>
</template>

<script>
	import {
		queryAssociation
	} from "@api"
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		name: "alumni",
		data() {
			return {
				page: 0,
				size: 5,
				type: -1,
				list: [{
					name: '行业校友会'
				}, {
					name: '地方校友会'
				}, {
					name: '院系校友会'
				}],
				indeximg: "../../static/logo.png",
				association: [], //相应类别校友会集合
				token: "",
				name: '',
				ty: 0
			};
		},
		computed: {
			...mapState(['USER'])
		},
		onLoad() {
			this.associationList(0);
			this.token = this.USER.token;
		},
		methods: {
			change(index) {
				this.association = [];
				this.currentId = 0;
				this.flag = 'true';
				this.associationList(index); /* 查询数据*/
			},
			/* </scroll-view>的触底函数*/
			scrolltolower: function() {
				console.log("我也是有底线的...");
				//一会使用瀑布流代码代替
			},
			//查询各类别下的校友会
			associationList(i) {
				var that = this;
				that.page = that.page + 1;				
				if (that.type != i) {
					/* 菜单栏变化时初始化数据*/					
					that.type = i;
					that.page = 0;
					that.association = [];
					that.flag = 'true';
				}
				that.type = i;
				queryAssociation({
					type: that.type,
					page: that.page,
					size: that.size
				}).then(res => {
					console.log(res)
					if (res.length == 0) {
						that.flag = 'false';
						that.page = that.page - 1;
						return false;
					}
					that.association = res;
				});
			},
			toxyh(id) {
				this.associationId = id;
				if(this.USER.token == 1 || this.USER.token == 2 || this.USER.token == ''){
					uni.showToast({
					    title: '请先完成认证再来加入！！',
						icon: 'none',
					    duration: 2000
					});
				}else{					
					uni.navigateTo({
						url: './alumni_club/alumni_club?id=' + this.associationId
					})
				}
				
			},
			srcImage: function(image) {
				return this.$t.getImageUrl(image);
			},
			srcHeadImg: function() {
				return this.$t.URL.staticImg + "/2.jpg";
			},
			goToSearch(){
				var that = this;
				if(that.name == ''){
					that.associationList(0);
				}else{
					queryAssociation({
						name: that.name,
						type: that.type,
						page: that.page,
						size: that.size
					}).then(res => {
						console.log(res)
						if (res.length == 0) {
						 	that.page = 0;
							that.ty = 2;
						 }
						 that.association = res;
						})
				}
			},
		}
	}
</script>

<style>
	.sear {
		padding: 10upx;
		width: 100%;
		height: 60upx;
		background: #FFFFFF;
	}

	.img {
		width: 100%;
		height: 300rpx;
		margin-top: 20rpx;
	}

	.list_box {
		border-radius: 10rpx;
		margin: 10rpx auto;
		width: 96%;
		height: 120rpx;
		transition: background-color 0.3s;
	}

	.list_box:active {
		background: rgba(0, 0, 0, 0.1);
	}

	.club_img {
		margin-top: 14rpx;
		margin-left: 15rpx;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}

	.club_text {
		font-size: 42rpx;
		height: 60rpx;
		line-height: 76rpx;
		align-items: center;

	}

	.club_member {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.br {
		margin: 0 auto;
		width: 94%;
		height: 4rpx;
		background: #f3f3f3;
	}

	.icon {
		position: absolute;
		right: 40rpx;
		top: 54rpx;
	}
</style>
